<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t('menu.M_10400608') }}
    </PageTitle>
    <!-- body -->
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      @current-change="currentChangeHandle"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.appName"
            maxlength="32"
            @blur="() => (dataForm.appName = dataForm.appName.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
            :placeholder="$t('developer_app.app_name')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.status"
            clearable
            :placeholder="$t('developer.status')"
          >
            <el-option
              v-for="item in $t('developer_app.sign.status_option')"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="getDataList((pageNo = 1))"
            class="w-8"
          >
            <svg-icon icon-class="search" class="text-lg" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" v-loading="dataListLoading" stripe>
        <el-table-column
          prop="appIcon"
          width="400px"
          min-width="300px"
          :label="$t('developer_app.app')"
        >
          <template v-slot="{ row }">
            <div
              style="display: flex; flex-direction: row"
              class="cursor-pointer"
              @click="infoHandle(row.appId, row.appVersionId)"
            >
              <div class="app-logo2" style="margin-right: 10px">
                <img
                  :src="iconView(row.appIcon)"
                  class="app-logo"
                  width="32px"
                />
              </div>
              <div>
                <div style="color: #12263f">
                  {{ row.appName }}
                </div>
                <div style="color: #95aac9 !important">
                  {{ row.appVersion }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="developerName"
          min-width="140px"
          :label="$t('developer.name')"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          min-width="140px"
          :label="$t('developer_app.version_status')"
        >
          <template v-slot="scope">
            <el-tag
              v-if="
                scope.row.appVersionStatus === -1 ||
                scope.row.appVersionStatus === 0 ||
                scope.row.appVersionStatus === 2 ||
                scope.row.appVersionStatus === 6
              "
              size="small"
              type="warning"
              >{{ handleStatus(scope.row.appVersionStatus) }}</el-tag
            >
            <el-tag
              v-if="scope.row.appVersionStatus === 1"
              size="small"
              type="success"
              >{{ handleStatus(scope.row.appVersionStatus) }}</el-tag
            >
            <el-tag
              v-if="
                scope.row.appVersionStatus === 5 ||
                scope.row.appVersionStatus === 7 ||
                scope.row.appVersionStatus === 9
              "
              size="small"
              type="private"
              >{{ handleStatus(scope.row.appVersionStatus) }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="submitTime"
          :label="$t('developer_app.app_submit_time')"
        >
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.submitTime)">
              {{ dateFilter(scope.row.submitTime) }}
              {{ scope.row.submitTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          min-width="100"
          :label="$t('developer.status')"
        >
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 2" size="small" type="warning">
              {{ $t('developer_app.sign.status_option[2].label') }}
            </el-tag>
            <el-tag v-if="scope.row.status === 1" size="small"
              >{{ $t('developer_app.sign.status_option[1].label') }}
            </el-tag>
            <el-tag v-if="scope.row.status === 0" size="small" type="info">
              {{ $t('developer_app.sign.status_option[0].label') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="signName"
          min-width="100"
          :label="$t('developer_app.signer')"
        >
          <template v-slot="scope">
            {{ getSigner(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column
          width="75px"
        >
          <template v-slot="scope">
            <div :title="$t('common.detail')"><el-button text class="w-8" @click="infoHandle(scope.row.appId, scope.row.appVersionId)"><svg-icon icon-class="View"/></el-button></div>
            <!-- <el-dropdown
              class="align-middle"
              trigger="click"
            >
              <el-button text>
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="infoHandle(scope.row.appId, scope.row.appVersionId)">
                    {{ $t('common.detail') }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
            <!-- <el-button
              type="text"
              @click="infoHandle(scope.row.appId, scope.row.appVersionId)"
              >{{ $t('developer.operate_detail') }}</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <app-version-detail
      v-if="appVersionDetailVisible"
      ref="appVersionDetail"
      @close="appVersionDetailVisible = false"
    ></app-version-detail>
  </div>
</template>

<script>
import { timeFilter, dateFilter } from '@/filters/index'
import { formatDate } from '@/utils/formatDate'
import { formatCountry } from '@/utils/formatCountry'
import { signAppList } from '@/api/developer-app'
import AppVersionDetail from './components/app-version-detail'
import PageTitle from '@/components/PageTitle/index.vue'
export default {
  components: {
    AppVersionDetail,
    PageTitle
  },
  data() {
    return {
      dataForm: {
        appName: '',
        developerType: null,
        status: null
      },
      appVersionDetailVisible: false,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    timeFilter,
    dateFilter,
    iconView(icon) {
      console.log(icon)
      if (icon) {
        return import.meta.env.VITE_APP_BASE_API + icon
        // return icon
      }
      return require('@/assets/img/Android.png')
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.dataForm.status,
        appName: this.dataForm.appName
      }
      signAppList(params)
        .then((data) => {
          this.dataList = data.data
          this.rows = data.rows
          this.dataListLoading = false
        })
        .catch((e) => {
          // this.$message.error(e.message)
          this.$confirmError(e)
          this.dataListLoading = false
          console.log(`err:${JSON.stringify(e)}`)
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList()
    },
    formatDate(cellValue, fmt) {
      return formatDate(cellValue, fmt)
    },
    formatCountry(row, column, cellValue, index) {
      return formatCountry(cellValue)
    },
    getSigner(row) {
      console.log(row)
      if (row.signer) {
        return (
          row.signer +
          ': ' +
          this.formatDate(row.signTime, 'YYYY-MM-DD HH:mm:ss')
        )
      }
      return ''
    },
    infoHandle(appId, appVersionId) {
      this.appVersionDetailVisible = true
      console.log('appId', appId)
      console.log('appVersionId', appVersionId)
      this.$nextTick(() => {
        this.$refs.appVersionDetail.init(appId, appVersionId)
      })
    },
    handleStatus(status) {
      if (status === 9) {
        return this.$t('developer_app.version_status_option[0].label')
      } else if (status === 7) {
        return this.$t('developer_app.version_status_option[1].label')
      } else if (status === 6) {
        return this.$t('developer_app.version_status_option[2].label')
      } else if (status === 5) {
        return this.$t('developer_app.version_status_option[3].label')
      } else if (status === 2) {
        return this.$t('developer_app.version_status_option[4].label')
      } else if (status === 1) {
        return this.$t('developer_app.version_status_option[5].label')
      } else if (status === 0) {
        return this.$t('developer_app.version_status_option[6].label')
      } else if (status === -1) {
        return this.$t('developer_app.version_status_option[7].label')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
